<template>
  <div class="ECP">
    <ul class="header__tab">
      <nuxt-link class="header__tab__item" exact-active-class="header__tab__item__active" tag="li" to="/permission">编辑用户</nuxt-link>
      <nuxt-link class="header__tab__item" exact-active-class="header__tab__item__active" tag="li" to="/permission/group">用户组权限</nuxt-link>
    </ul>
    <div class="header__search">
      <button class="Ecp-button-primary" style="float:right;" @click="openFormDialog">添加子账号</button>
      <el-select
        v-model="searchUser"
        style="width: 128px;"
        placeholder="全部">
        <el-option
          v-for="item in routerOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <input class="header__search__input" style="width: 128px; margin-left:32px;margin-right:32px;" placeholder="搜索用户"/>
      <button class="Ecp-button-primary">搜索</button>
    </div>
    <div class="table__box">
      <el-table
        :height="getTableHeight"
        style="margin-top:-46px;background-color: transparent;"
        header-row-class-name="table__header"
        row-class-name="table__row"
        :data="tables">
        <el-table-column
          prop="id"
          label="子账号ID">
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          label="用户组">
          <template slot-scope="scope">
            <el-dropdown>
              <el-button type="text">用户组<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column
          class-name="table__cell__operate"
          label="操作用户">
          <template slot-scope="scope">
            <el-button size="mini" @click.native="openFormDialog(scope.row)" round>编辑用户<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
          </template>
        </el-table-column>
      </el-table>


      <div class="table__pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="50">
        </el-pagination>
      </div>
    </div>
    <!-- 新增子账号 -->
    <el-dialog
      top="66px"
      :visible.sync="dialogVisible"
      width="360px"
      class="user__dialog"
      center>
      <span class="user__dialog__header" slot="title">{{form.title}}</span>
      <el-form :model="form" ref="dialogForm" label-width="160px" label-position="left" class="Server__form">
        <el-form-item v-show="form.id!=''" label="子账号">
          <input style="width:100%;" :value="form.id" type="text" placeholder="请输入子账号" readonly class="user__dialog__input">
        </el-form-item>
        <el-form-item
          label="昵称"
          prop="price"
          :rules="[
            { required: true, message: '昵称不能为空'}
          ]"
        >
          <input style="width:100%;" v-model="form.nickName" type="text" placeholder="请输入昵称" auto-complete="off" class="user__dialog__input">
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="price"
          :rules="[
            { required: true, message: '联系电话不能为空'},
            { type: 'number', message: '联系电话必须为数字值'}
          ]"
        >
          <input style="width:100%;" v-model="form.mobile" type="text" placeholder="请输入联系电话" auto-complete="off" class="user__dialog__input">
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="price"
          :rules="[
            { required: true, message: '邮箱不能为空'}
          ]"
        >
          <input style="width:100%;" v-model="form.email" type="text" placeholder="请输入邮箱" auto-complete="off" class="user__dialog__input">
        </el-form-item>
        <el-form-item
          label="密码"
          prop="price"
          :rules="[
            { required: true, message: '密码不能为空'}
          ]"
        >
          <input style="width:100%;" v-model="form.pwd" type="password" placeholder="请输入密码" auto-complete="off" class="user__dialog__input">
        </el-form-item>
      </el-form>
      <span slot="footer" class="Server__dialog__footer">
        <el-button size="mini" style="font-size:16px;" @click="resetForm" round>取 消</el-button>
        <el-button size="mini" type="primary" style="margin-left:124px;font-size:16px;" @click="dialogVisible=false" round>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    components: {

    },
    data() {
      return {
        dialogVisible: false,
        searchUser:'',
        form: {
          title: '添加子账号',
          id: '',
          nickName: '',
          mobile: '',
          email: '',
          pwd: ''
        },
        routerOptions:[
          {
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '用户组1'
          },
          {
            value: 2,
            label: '用户组2'
          },
          {
            value: 3,
            label: '用户组3'
          }
        ],
        tables: [
          {
            id: 123456,
            nickName: '昵称',
            email: '123456@163.com',
            user: 1,
            mobile: '13476087098',
            pwd: '123456'
          },
          {
            id: 123786,
            nickName: '昵称',
            email: '123676@163.com',
            user: 2,
            mobile: '13476087098',
            pwd: '123456'
          },
          {
            id: 243786,
            nickName: '昵称',
            email: '156676@163.com',
            user: 2,
            mobile: '13476087098',
            pwd: '123456'
          }
        ]
      }
    },
    beforeMount () {
    },
    methods: {
      resetForm() {
        this.$refs['dialogForm'].resetFields()
        this.dialogVisible = false
      },
      openFormDialog(data=null) {
        this.dialogVisible = true
        if (data==null) return this.form.title = '添加子账号'
        this.form.title = '编辑用户'
        this.form.id = data.id
        this.form.nickName = data.nickName
        this.form.mobile = data.mobile
        this.form.email = data.email
        this.form.pwd = data.pwd
      }
    },
    computed: {
      getTableHeight () {
        return this.$store.state.innerHeight-264
      }
    }
  }
</script>

<style lang="scss" scoped>
.user__dialog {
  & /deep/ {
    .el-form-item__label, .el-form-item__content {
      font-size: 16px;
      line-height: 25px;
    }
    .el-dialog__header {
      color: #409EFF;
      font-size: 16px;
      text-align: left;
      border-bottom: 1px solid #f5f6fa;
    }
    .el-dialog--center {
      border-radius: 20px;
    }
  }
  &__input {
    width: 129px;
    height: 25px;
    border-radius: 12px;
    border: solid 1px #dadada;
    text-align: center;
    &:focus {
      outline: none;
    }
  }
}
.table{
  &__pagination {
    margin-top:15px;
    text-align: center;
    & /deep/ {
      .el-pagination {
        .btn-next, li, .btn-prev {
          background-color: transparent;
        }
      }
    }
  }
  &__box{
    text-align: center;
    padding: 45px 36px 15px;
    background-color: #fff;
    &::before {
      content: "";
      display: block;
      background-color: rgb(255, 255, 255);
      height: 46px;
      margin-top: -46px;
      margin-left: -36px;
      margin-right: -36px;
      border-bottom: 1px solid #dadada;
    }
    & /deep/ {
      .el-table__body-wrapper {
        padding-top: 11px;
      }
      .table__header {
        th {
          text-align: center;
          color: #191919;
          font-size: 16px;
          border: none;
          padding: 11px 0;
        }
      }
      .table__row {
        background-color: transparent;
        &:hover {
          background-color: transparent;
        }
        td {
          background-color: transparent;
          padding: 11px 0;
          border: none;
          color: #191919;
          font-size: 16px;
        }
        .el-dropdown-selfdefine {
          color: #191919;
          padding: 0;
          font-size: 16px;
        }
        .table__cell__operate{
          padding: 5px 0;
          .el-button--default.is-round {
            font-size: 16px;
            background-color: transparent;
          }
        }
      }
    }
  }
}
.header {
  &__search {
    height: 105px;
    background-color: #fff;
    padding-top: 40px;
    padding-left: 36px;
    padding-right: 86px;
    & /deep/ {
      .el-input__inner, .el-input--suffix{
        height: 25px;
        line-height: 25px;
        background-color: #f0f5fb;
        border: none;
        border-radius: 8px;
      }
      .el-input__icon {
        line-height: 25px;
      }
    }
    &__input {
      height: 25px;
      background-color: #f0f5fb;
      border-radius: 9px;
      vertical-align: middle;
      border: none;
      padding: 0 10px;
      text-align: center;
      font-size: 13px;
      width: 86px;
      &:focus {
        outline: none;
      }
    }
  }
}

</style>
